<template>
	<div class="screen_wrap echarts_box flex_wrap">
        <corner></corner>
        <title1 title="站点水质等级日历图"></title1>
		<div class="flex_body">
			<e-chart :options="option" style="height:100%"></e-chart>
		</div>
	</div>		
</template>
<script>
	import { getSwapThisYearLevel } from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'		
	export default {
		components: {
			corner,title1
		},				
		data() {
			return {
				option: null,
				dataList:[],
				allData:null,
				currentIndex:0,
				range:2021,
				siteName:'',
				deptName:'',
				timer:null
			}
		},
		mounted() {
			this.initData()
			let that=this
			this.timer=setInterval(function(){
				that.currentIndex++
				if(that.currentIndex>=that.allData.length){
					that.currentIndex=0
				}
				that.init()
			},5000)			
		},
	    beforeDestroy() {
	       clearInterval(this.timer)
	    },			
		methods: {
			initData(){
				getSwapThisYearLevel().then(res=>{
					this.allData=res.data.data
					this.init()
				})
			},
			init() {	
				this.dataList=[]
				let info=this.allData[this.currentIndex]
				this.siteName=info.siteName
				this.deptName=info.deptName
				info.localDateTimes.forEach((item,index)=>{
					let arr=[]
					arr.push(item,info.levels[index])
					this.dataList.push(arr)
				})
				this.option = {
				    title: {
				        top: 20,
				        left: 'center',
				        text: this.deptName+'-'+this.siteName,
				        textStyle:{
				        	color:this.$fontColor
				        }				        
				    },					
				    tooltip: {
				    	position: 'top',
						formatter:function(params){
							if(params.value[1]>0){
								let str=''
								if(params.value[1]>=1&&params.value[1]<=3){
									str='I~III'
								}else if(params.value[1]==4){
									str='IV'
								}else if(params.value[1]==5){
									str='V'
								}else if(params.value[1]==6){
									str='劣V'
								}								
								return params.marker+params.value[0]+' '+str
							}else{
								return ''
							}							
						},				    	
				    },
		            //左侧小导航图标
					visualMap: {
						show: true,
						orient:'horizontal', // 水平排列
						type: 'piecewise', 
						textStyle:{
							color:'#fff'
						},
						formatter:function(a,b){
							if(a==1){
								return 'I~III'
							}else if(a==4){
								return 'IV'
							}else if(a==5){
								return 'V'
							}else if(a==6){
								return '劣V'
							}else{
								return '0'
							}
						},
						left: '30%',
						top: '20%',						
						splitList: [
							{start: 6,end: 6}, 
							{start: 5,end: 5},
							{start: 4,end: 4}, 
							{start: 1,end: 3}
						],
                        color: ['#ee6666','#fac858','#91cc75','#5470c6'],
                        //定义 在选中范围外 的视觉元素。
						outOfRange:{ 
						   color: ['#0c0e2d']						
						}                       
					},
					// 日历坐标系组件
				    calendar: {
				        top: '40%',
				        left: '12%',
				        width:'80%',
				        right:'10%',
				        cellSize: [20,20],
				        range: this.range,
				        splitLine:{
				        	show:false
				        },
				        itemStyle: {
				            borderWidth: 1,
				            color:'#fff'
				        },
				        dayLabel:{
				        	 color:'#fff',
                             nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']				        	 
				        },
				        monthLabel:{
				        	color:'#fff',
							formatter: function (param) {
							    return param.M+'月';
							}				        	
				        },
				        yearLabel: {show: false}
				    },
				    series: {
				        type: 'heatmap',
				        coordinateSystem: 'calendar',
				        data: this.dataList
				    }
				}				
			}			

		}
	}
</script>
